<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}

			#busy01 {
				width: 150px;
				height: 200px;
				padding: 25px 10px;
				text-align: center;
			}
		</style>
		
	</head>

	<body>
		
		<div id="busy01" class="ui-widget-header"> Div 01 </div>

		<br style="clear: both;" />
		<br style="clear: both;" />

		<button onclick="window.busy1.show();">Busy</button>
		<button onclick="window.busy1.hide();">Availble</button>

		<br /><br />

		<script type="text/javascript" charset="utf-8">

			var init = function() {
				
				window.busy1 = new Nokia.Busy({
					element: '#busy01',
					autoOpen: false,
					loaderText: 'Loading...',
					create: function() {
						console.log("Busy 01: Create.");
					},
					show: function() {
						console.log("Busy 01: Show.");
					}
				});

				window.busy2 = new Nokia.Busy({
					element: document.body,
					autoOpen: true,
					create: function() {
						console.log("Busy 02: Create.");
					},
					show: function() {
						console.log("Busy 02: Show.");
					}
				});

				setTimeout(function() {
					busy2.destroy();
				}, 2000);
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
			
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('busy', init);

		</script>

	</body>
</html>